<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutStudent}">

<head>
	<meta charset="UTF-8">
	<title>资讯信息</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="12" :offset="6">
				<div class="card border">
				<!-- Card header -->
				<div class="card-header border-bottom">
					<h5 class="card-header-title">资讯列表 </h5>
				</div>
				<!-- Card body START -->
				<div class="card-body vstack gap-3">
					<!-- Listing item START -->
					<div class="card border p-2">
						<div class="row g-4" v-for="info in raceInfos" :key="info.infoId">
							<!-- Card img -->
							<div class="col-md-3 col-lg-2">
								<img :src="info.infoImg" class="card-img rounded-2" alt="Card image">
							</div>
							<!-- Card body -->
							<div class="col-md-9 col-lg-10">
								<div class="card-body position-relative d-flex flex-column p-0 h-100">
									<h5 class="card-title mb-0 me-5">{{info.infoTitle}}</h5>
									<small>{{info.infoSubtitle}}</small>
		
		
									<div class="d-sm-flex justify-content-sm-between align-items-center mt-3 mt-md-auto">
		
										<div class="d-flex align-items-center">
		
											<span class="mb-0 me-2">{{info.infoTime}}</span>
										</div>
		
										<div class="hstack gap-2 mt-3 mt-sm-0">
											<a :href="'/student/raceInfoDetail/' + info.infoId" class="btn btn-sm btn-primary mb-0">
												<i class="el-icon-view"></i>
											</a>
											<!--<a href="#" class="btn btn-sm btn-danger mb-0"><i
													class="bi bi-trash3 fa-fw me-1"></i>Delete</a>-->
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Card body END -->
			</div>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog :title="raceInfoForm.ttitle" :visible.sync="raceInfoForm.visible" width="30%">
			<el-form :model="raceInfoForm" :rules="raceInfoRules" ref="raceInfoForm" label-width="100px">
				<!-- -->
				<el-form-item label="发布人" prop="infoPublishId">
					<el-input v-model="raceInfoForm.infoPublishId"></el-input>
				</el-form-item>
				<el-form-item label="标题" prop="infoTitle">
					<el-input v-model="raceInfoForm.infoTitle"></el-input>
				</el-form-item>
				<el-form-item label="副标题" prop="infoSubtitle">
					<el-input v-model="raceInfoForm.infoSubtitle"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="infoContent">
					<el-input v-model="raceInfoForm.infoContent"></el-input>
				</el-form-item>
				<el-form-item label="图标" prop="infoImg">
					<el-input v-model="raceInfoForm.infoImg"></el-input>
				</el-form-item>
				<el-form-item label="创建时间" prop="infoTime">
					<el-input v-model="raceInfoForm.infoTime"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeRaceInfo">取 消</el-button>
				<el-button type="primary" @click="saveRaceInfo">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		raceInfos: [],
		selectRaceInfo: null,
		raceInfoForm: {
			visible: false,
			ttitle: '新增/修改',
			infoId : '',
			infoPublishId : '',
			infoTitle : '',
			infoSubtitle : '',
			infoContent : '',
			infoImg : '',
			infoTime : '',
		},
		raceInfoQuery: {
			userId: 'not',
			page: '',
			size: '',
		},
		raceInfoRules: {
			infoId: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			infoPublishId: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			infoTitle: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			infoSubtitle: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			infoContent: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			infoImg: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			infoTime: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
		},
	}
	let vueMethods = {
		getRaceInfos() {
			let that = this
			postRequst('/getInfos', that.raceInfoQuery, true).then(function (resp) {
				that.raceInfos = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					that.selectRaceInfo = resp.rows[0]
				}
			})
		},
		openRaceInfo(row) {
			let that = this
			if (row) {
				that.raceInfoForm.ttitle = '修改'
				that.raceInfoForm.infoId = row.infoId
				that.raceInfoForm.infoPublishId = row.infoPublishId
				that.raceInfoForm.infoTitle = row.infoTitle
				that.raceInfoForm.infoSubtitle = row.infoSubtitle
				that.raceInfoForm.infoContent = row.infoContent
				that.raceInfoForm.infoImg = row.infoImg
				that.raceInfoForm.infoTime = row.infoTime
			} else {
				that.raceInfoForm.ttitle = '新增'
				that.raceInfoForm.infoId = ''
				that.raceInfoForm.infoPublishId = ''
				that.raceInfoForm.infoTitle = ''
				that.raceInfoForm.infoSubtitle = ''
				that.raceInfoForm.infoContent = ''
				that.raceInfoForm.infoImg = ''
				that.raceInfoForm.infoTime = ''
			}
			that.raceInfoForm.visible = true
		},
		closeRaceInfo() {
			this.$refs["raceInfoForm"].resetFields();
			this.raceInfoForm.visible = false
		},
		saveRaceInfo() {
			let that = this
			this.$refs["raceInfoForm"].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveRaceInfo', that.raceInfoForm).then(function (resp) {
						if (resp.status == 0) {
							that.getRaceInfos()
							that.raceInfoForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delRaceInfo(infoId) {
			let that = this
			postRequst('/admin/delRaceInfo', {infoId: infoId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getRaceInfos()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
	}
	function vueCreated() {
		let that = this
		that.getRaceInfos()
	}
</script>

</html>